<!--                                                                      
    Designer   : Renyangang               
                                                                            
    Licensed under the Apache License, Version 2.0 (the "License");         
    you may not use this file except in compliance with the License.        
    You may obtain a copy of the License at                                 
                                                                            
        http://www.apache.org/licenses/LICENSE-2.0                          
                                                                            
    Unless required by applicable law or agreed to in writing, software    
    distributed under the License is distributed on an "AS IS" BASIS,       
    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
    See the License for the specific language governing permissions and     
    limitations under the License. 
-->
<template>
    <div>
        <n-table :bordered="false" :single-line="false" size="small">
            <thead>
            <tr>
                <th>No.</th>
                <th>Pin Name</th>
                <th width="3">Width</th>
                <th>Operation</th>
            </tr>
            </thead>
            <tbody>
            <tr v-if="pinProps.length > 0" v-for="pin,idx in pinProps" :key="idx">
                <td>{{idx+1}}</td>
                <template v-if="pin.edit">
                    <td><n-input v-model:value="pin.Name" placeholder="please input pin name"></n-input></td>
                    <td><n-input-number placeholder="bitsize" v-model:value="pin.BitSize" :show-button="false"></n-input-number></td>
                </template>
                <template v-else>
                    <td>{{pin.Name}}</td>
                    <td>{{pin.BitSize}}</td>
                </template>
                <td>
                    <n-popover trigger="hover" v-if="canAdd">
                        <template #trigger>
                            <n-button class="opbtn" strong secondary circle type="primary" size="small" @click="addPin(idx)">
                                <template #icon>
                                    <n-icon><AddCircle /></n-icon>
                                </template>
                            </n-button>
                        </template>
                        <span>add pin after this item</span>
                    </n-popover>
                    <template v-if="canEdit">
                        <n-popover trigger="hover" v-if="pin.edit">
                            <template #trigger>
                                <n-button  class="opbtn"  strong secondary circle type="primary" size="small" @click="savePin(idx)">
                                    <template #icon>
                                        <n-icon><CheckmarkCircleSharp /></n-icon>
                                    </template>
                                </n-button>
                            </template>
                            <span>save</span>
                        </n-popover>
                        <n-popover trigger="hover" v-else>
                            <template #trigger>
                                <n-button  class="opbtn" strong secondary circle type="primary" size="small" @click="pin.edit = true">
                                    <template #icon>
                                        <n-icon><CreateSharp /></n-icon>
                                    </template>
                                </n-button>
                            </template>
                            <span>edit</span>
                        </n-popover>
                    </template>
                    <n-popover trigger="hover" v-if="canAdd">
                        <template #trigger>
                            <n-popconfirm
                                @positive-click="removePin(idx)"
                            >
                                <template #trigger>
                                    <n-button class="opbtn" strong secondary circle type="error" size="small">
                                        <template #icon>
                                            <n-icon><RemoveCircleSharp /></n-icon>
                                        </template>
                                    </n-button>
                                </template>
                                are you sure to remove this pin?
                            </n-popconfirm>
                        </template>
                        <span>remove</span>
                    </n-popover>
                    <n-popover trigger="hover" v-if="idx > 0 && canAdd">
                        <template #trigger>
                            <n-button class="opbtn" strong secondary circle type="primary" size="small" @click="upPin(idx)">
                                <template #icon>
                                    <n-icon><ArrowUpCircleSharp /></n-icon>
                                </template>
                            </n-button>
                        </template>
                        <span>up</span>
                    </n-popover>
                    <n-popover trigger="hover" v-if="idx < pinProps.length - 1 && canAdd" >
                        <template #trigger>
                            <n-button class="opbtn" strong secondary circle type="primary" size="small" @click="downPin(idx)">
                                <template #icon>
                                    <n-icon><ArrowDownCircleSharp /></n-icon>
                                </template>
                            </n-button>
                        </template>
                        <span>down</span>
                    </n-popover>
                </td>
            </tr>
            <tr v-else>
                <td colspan="4" class="emptytd">
                    <n-popover trigger="hover" v-if="canAdd">
                        <template #trigger>
                            <n-button strong secondary circle type="primary" size="small" @click="addPin(-1)">
                                <template #icon>
                                    <n-icon><AddCircleSharp /></n-icon>
                                </template>
                            </n-button>
                        </template>
                        <span>add pins</span>
                    </n-popover>
                </td>
            </tr>
            </tbody>
        </n-table>
    </div>
</template>
<script setup lang="ts">
import {ref,onMounted} from "vue";
import {NTable, NButton,NInput, NInputNumber,NPopconfirm,NIcon,NPopover} from "naive-ui";
import { pins } from "../../../wailsjs/go/models";
import { AddCircleSharp,RemoveCircleSharp,CreateSharp,CheckmarkCircleSharp,AddCircle,ArrowDownCircleSharp,ArrowUpCircleSharp } from '@vicons/ionicons5'

interface PinSettingProps extends pins.PinDef {
    edit?: boolean
}

const props = defineProps({
    direction: {
        type: Number,
        default: 0
    },
    canEdit: {
        type: Boolean,
        default: true
    },
    canAdd: {
        type: Boolean,
        default: true
    }
})
const pinProps = ref<PinSettingProps[]>([]);
const model = defineModel<pins.PinDef[]>();
// const emit = defineEmits(["update:modelValue"]);

onMounted(() => {
    if (model.value) {
        pinProps.value = model.value.map((pin) => {
            let newSig:PinSettingProps = {...pin};
            newSig.edit = false;
            return newSig;
        })
    }
})

const addPin = (idx: number) => {
    pinProps.value.splice(idx+1, 0, {
        Name: "",
        BitSize: 1,
        Direction: props.direction,
        edit: true
    })
}

const removePin = (idx: number) => {
    pinProps.value.splice(idx, 1);
    model.value?.splice(0);
    model.value?.push(...pinProps.value);
}

const savePin = (idx: number) => {
    pinProps.value[idx].edit = false;
    console.log(pinProps.value)
    model.value?.splice(0);
    model.value?.push(...pinProps.value);
}

const upPin = (idx: number) => {
    let movedElement = pinProps.value.splice(idx, 1)[0];
    pinProps.value.splice(idx-1, 0, movedElement);
    model.value?.splice(0);
    model.value?.push(...pinProps.value);
}

const downPin = (idx: number) => {
    let movedElement = pinProps.value.splice(idx, 1)[0];
    pinProps.value.splice(idx+1, 0, movedElement);
    model.value?.splice(0);
    model.value?.push(...pinProps.value);
}

</script>
<style lang="scss" scoped>
th {
    height: 1rem;
    text-align: center;
    background-color: var(--fv-c-light-back);
}
td {
    padding: 0;
    text-align: center;
    vertical-align: middle;
    // display: flex;
    align-items: center;
}
.n-table {
    width: 35rem;
}
.emptytd {
    text-align: center;
    height: 4rem;
}
.opbtn {
    width: 16px;
    height: 16px;
    background-color: rgba($color: #000000, $alpha: 0);
    line-height: 28px;
    vertical-align: middle;
}
</style>